<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <div style="padding: 20px">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="padding: 0 20px">独家销售</div>
    <div
      style="
        padding: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      "
    >
      <div
        v-for="(i, index) in products.obj"
        :key="index"
        style="
          width: 35%;
          margin-bottom: 20px;
          border: 1px solid #e3e3e3;
          border-radius: 10px;
          background: #fff;
          padding: 20px;
          text-align: center;
        "
        @click.stop="gotoProductInfo(i, index)"
      >
        <div><img :src="i.img" style="height: 100px" /></div>
        <div style="text-align: left">{{ i.name }}</div>
        <div
          style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >
          <span>{{ i.unit }}{{ i.price }}</span>
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>
    <div style="padding: 0 20px"><h4>热门销售</h4></div>

    <div
      style="
        padding: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 20px;
      "
    >
      <div
        v-for="(i, index) in hot_products"
        :key="index"
        style="
          width: 35%;
          margin-bottom: 20px;
          border: 1px solid #e3e3e3;
          border-radius: 10px;
          background: #fff;
          padding: 20px;
          text-align: center;
        "
        @click.stop="gotoProductInfo(i, index)"
      >
        <div><img :src="i.img" style="width: 120px; height: 120px" /></div>
        <div style="text-align: left">{{ i.name }}</div>
        <div
          style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >
          <span>{{ i.unit }}{{ i.price }}</span>
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { storeToRefs } from "pinia";

import { myMixin } from "./../mixin.js";
const { errorMsgBox, successMsgBox, apiAll, withLoading } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let swipe = new URL(`../assets/swipe.png`, import.meta.url).href;
onMounted(() => {
  //getProducts();
  //addProducts();
});
let active = ref("home");
 let products = useUserStore.products;
//let products = reactive({ obj: [] });
let hot_products = useUserStore.hot_products;
let cartList = useUserStore.cartList;

function gotoIndex() {
  router.push("index");
}
function gotoSearch() {
  router.push("search");
}
async function getProducts() {
  let data = {};
  const res = await withLoading(
    apiAll(data, "http://localhost:3000/goods/getGoods")
  );
  products.obj = res;
}
//新增商品接口
// async function addProducts() {
//   await products.forEach((element) => {
//     const res = withLoading(
//       apiAll(element, "http://localhost:3000/goods/addGoods")
//     );
//   });
// }
function addCart(i, index) {
  document.querySelectorAll(".plus-product")[index].classList.add("scale");
  setTimeout(() => {
    document.querySelectorAll(".plus-product")[index].classList.remove("scale");
  }, 300);
  if (!i.num) {
    i.num = 1;
  }
  i.totalPrice = i.price;
  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == i.id) {
      cartProduct.num += 1;
      cartProduct.totalPrice = cartProduct.num * i.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(i);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}
function gotoProductInfo(i, index) {
  if (!i.num)
  { i.num = 1;}
  i.totalPrice = i.num * i.price;
  window.localStorage.setItem("currentProductIndex", index);
  window.localStorage.setItem("lastPage", "index");
  router.push("productInfo");
}
</script>
